<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>女神节抽好礼</title>
    <script src="${ctxStatic}/scripts/draw/viewport.js?v=${fns:getConfig('drawVersion')}"></script>
    <link rel="stylesheet" href="${ctxStatic}/css/draw/hsy.min.css?v=${fns:getConfig('drawVersion')}">
     <script src="http://cdnjs.gtimg.com/cdnjs/libs/wxmoment/0.0.2/wxmoment.min.js"></script>
    <script type="text/javascript">
	function onBridgeReady(){
		WeixinJSBridge.call('hideOptionMenu');
	}
	
	if (typeof WeixinJSBridge == "undefined"){
	if( document.addEventListener ){
			document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
		}else if (document.attachEvent){
			document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
			document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
		}
	}else{
		onBridgeReady();
	}
	</script>
</head>
<body>
<div class="wrap">    
    <!--logo-->
    <div class="logo"></div>
    <!--banner-->
    <div class="index-banner"></div>
    <!--标题图片-->
    <div class="title"></div>        
    <!--抽奖-->
    <!--抽奖机会提示-->
    <div class="hint">
        <h2>您还有
       	<span id="remain">       	
 			<c:choose>
			   <c:when test="${drawTimes ==null}">  
				   0
			   </c:when>
			   <c:otherwise> 
		    	  ${drawTimes }
			   </c:otherwise>
			</c:choose>	          	       	
        </span>次抽奖机会</h2>
        <p>点开花~奖品就在里面</p>
    </div>
    <div class="fudai btn-draw">
    </div>    
        
    <!--遮罩层-->
    <div class="mask"></div>    
    <!--  弹出层 -->
    <div class="eject-no">
        <div class="flower1"></div>
        <div class="flower2"></div>
        <div class="flower3"></div>
        <div class="flower4"></div>
        <div class="flower5"></div>
        <div class="popup-border">
            <h2>暂时没抽中</h2>
            <span>赶快买合生元产品再接再厉吧</span>
            <a href="javascript:;" class="close"></a>
        </div>
    </div>    
    
    <div class="eject-draw">
        <div class="flower1"></div>
        <div class="flower2"></div>
        <div class="flower3"></div>
        <div class="flower4"></div>
        <div class="flower5"></div>    	       
        <div class="popup-border">
            <h3> &nbsp;&nbsp;中奖了！</h3>
            <h2 id="awardname">“千”程似锦</h2>
            <!-- <div id="image"  class="title1"></div> -->
            <!-- <p id="draw-xinxi">请填写领奖信息</p> -->
            <p id="description">苏宁易购 <span>1000</span>元礼品卡带回家</p>
            <a href="${ctxFront}/contactInformation" class="btn-draw" id ="submit">填写领奖信息！</a>
            <a href="javascript:;" class="close"></a>
        </div>
        
    </div>
     <a style="font-size: 36px; position: absolute;top: 467px;" href="${ctxFront}/getMyAwards?openId=${openid}" id="btn-hd">个人中心</a>
    <!--按钮-->
    <div class="btn">
        <a href="${ctxFront}/rule" id="btn-hd">活动规则</a>
        <a href="${ctxFront}/winner?openid=${openid}&pageindex=1&pagesize=5" id="btn-zj">中奖名单</a>
    </div>
 
    <!--底部-->
    <footer></footer>
</div>
<!--js-->
<script src="${ctxStatic}/scripts/draw/jquery-1.11.2.min.js?v=${fns:getConfig('drawVersion')}"></script>
<script src="${ctxStatic}/scripts/draw/touch-0.2.14.min.js?v=${fns:getConfig('drawVersion')}"></script>
<script>
    $(function () {
      	  
		new WxMoment.OrientationTip();
   	
        //动态居中定位
        function eject_center(ejest) {
            var width = ejest.width();
            var height = ejest.height();
            var ww = $(window).width();
            var wh = $(window).height();
            var _left = (ww - width) / 2;
            var _top = (wh - height) / 2;
            ejest.css({top: _top, left: _left});
        }

        eject_center($('.eject-no'));
        eject_center($('.eject-draw'));

        $('.close').bind('tap', function () {
            $('.mask').fadeOut(100);
            $('.eject-no').fadeOut(100);
            $('.eject-draw').fadeOut(100);
            
			//解除点击方法
			$('.btn-draw').unbind("click");
            
         	 //绑定点击方法
        	$('.btn-draw').bind('click', draw);
        });     	
    	
        
        /**绑定点击方法**/        
    	$('.btn-draw').bind('click', draw);
    	
    	/**弹框方法**/
		function tip(msg){
    		
    		//弹框
			alert(msg);
			
			//解除点击方法
			$('.btn-draw').unbind("click");
			
			//绑定点击方法,防止暴力点击，设置时间间隔为500毫秒			 
			setTimeout(function () { 
		    	$('.btn-draw').bind('click', draw);
		    }, 500);
			 			
		}
		
		/**抽奖**/
		function draw(){
			
				//解除点击方法
				$('.btn-draw').unbind("click");
								
				//异步请求抽奖
    			$.ajax({
    				url:'${ctxFront}/draw',
    				type:'post',
    				data:{ openid : "${openid }",fromSystem : "${fromSystem}" },
    				dataType:'json',
    				success:function(res){    					
    					if(!res || !res.error){
    						tip('抽奖异常:请求响应格式不正确');
    						return;
    					}
    					
    					if(res.error.errCode==1){
    						if(res.error.errMsg != null){
/*         						tip('抽奖异常:'+res.error.errMsg); */
        						flag = true;
        						return;
    						}else{
    							tip("注册成为合生元会员即有机会抽取千元大奖");
    							return;
    						}
    					}
    					
    					//抽奖正常
    					var awardDto = res.obj;
    					if(awardDto){
    						if(!awardDto.check){
    							tip(awardDto.msg);
    							return
    						}
    						
    						if(awardDto.award){
    							    		
    							var awardTypeName = awardDto.awardtypeName;
    							    							
    							//如果不是实物，就隐藏
    							if(awardTypeName != 'commodity' && awardTypeName != 'moviecode'){
    								$("#submit").hide();
    							}
    							
       							//奖品名称
    							var name =$("#awardname");
       							
    							//修改奖品信息
    							$("#awardname").html(awardDto.awardName);	
    							
    							//提示信息
    							var tipsHtml = null;   							
								if(awardTypeName  ==  'points'){
    								tipsHtml = "积分已充值到您的合生元积分账户";
    							} 							
    							else if(awardTypeName  ==  'exchange' || awardTypeName  ==  'coupon'){
    								tipsHtml = "优惠券已发到您的合生元卡券包内";
    							}
    							$("#description").html(tipsHtml);	
    							
    				            $('.mask').fadeIn(100);
    				            $('.eject-draw').fadeIn(100);			
    				               
    				            if(awardTypeName == 'moviecode'){
    				                //跳到分享页面
    				                $('.btn-draw').html('点击分享给好友');
            				        $('.btn-draw').attr('href','${ctxFront}/shareIndex?shareId='+awardDto.shareId); 
    				            }else{
        					        //修改收件人信息链接
            				        $('.btn-draw').attr('href','${ctxFront}/contactInformation?awardname='+awardDto.awardName+"&winnerid="+awardDto.winnerid+"&openid=${openid }"); 
    				            }
    				            
    				           
    						}else{
    				            $('.mask').fadeIn(100);
    				            $('.eject-no').fadeIn(100);		
    						}
    					}else{
    						tip('抽奖异常:抽奖返回数据错误');
    						return;
    					}
    					
    					var str =$("#remain");
    					$("#remain").html(awardDto.remain);
    				},
    				error:function(res){
						if(res.responseText != null){
	    					tip('抽奖异常:'+res.responseText);
	    					return;
						}else{
							tip("网络加载延迟,请再试!");
							return;
						}    					  					
    				}
    				
    			})      		
		}
		
    });
       
</script>
</body>
</html>